<template>
      <div id="count">
            <el-card>
                  <div slot="header">统计分析{{paper_id}}</div>
                  <div>
                         <!-- 整体统计部分 -->
                        <ve-pie :data="countData"></ve-pie>
                  </div>
            </el-card>

            <!-- 单个问卷统计 -->
            <el-table :data="countRowData" style="width: 100%;padding:20px;box-sizing:border-box;margin-top:10px;" v-loading="treeLoading">
                  <el-table-column label="问卷标题" width="400">
                        <template slot-scope="{row}">
                              <span>{{row.title}}</span>
                        </template>
                  </el-table-column>
                  <el-table-column  label="内容">
                        <template slot-scope="{row}">
                              <ul style="padding:0;margin:0">
                                    <li v-for="(con,index) in row.data.content" :key="'con'+index">
                                          <div>{{con.value}}</div>
                                          <el-tag type="primary" style="padding:0 6px;height:auto;line-height:24px">
                                                {{con.answerText}}
                                          </el-tag>
                                    </li>
                              </ul>            
                        </template>
                  </el-table-column> 
                  <el-table-column  label="分析">
                        <template slot-scope="{row}">
                              <ve-histogram :data="row" height="400px" :extend="extend" :settings="chartSettings"></ve-histogram>
                        </template>
                  </el-table-column>     
            </el-table>
      </div>
</template>
<script>
export default {
      props:['paper_id'],
      data(){
            this.extend={
                  series:{
                        barWidth:'40px',
                  },
                  'xAxis.0.axisLabel.rotate': -30
            }
            this.chartSettings = {
                  xAxisType: 'time'
            }
            this.chartSettings = {
                  xAxis:{
                        nameRotate:45,
                        axisLable:{
                              rotate:45,
                              width:'20px'
                        }
                  }
            }
            return {
                  countData:{},
                  countRowData:[],
                  treeLoading:false,
            }
      },
      methods:{
            // 获取整体统计方法
            getCountData(){
                  this.treeLoading=true
                  this.$http.get(`/answer/count?paper_id=${this.paper_id}`).then(result=>{
                        this.treeLoading=false
                        this.countData=result.data.data
                  })
            },
            // 获取单个问卷统计方法
            getCountRowData(){
                  this.treeLoading=true
                  this.$http.get(`/answer/countrow?paper_id=${this.paper_id}`).then(result=>{
                        this.treeLoading=false
                        this.countRowData=result.data.data
                  })
            }
      },
      created(){
            // 调用整体统计方法
            this.getCountData()
            // 调用单个问卷统计方法
            this.getCountRowData()
      }
}
</script>
<style>

</style>


